<template>
  <!-- 为“Echarts”准备一个具备宽度和高度的DOM容器↓ -->
  <div ref="main" :class="className" :style="{height:height,width:width}"></div>
</template>
<script>
// 引入“Echarts”模块
import echarts from "echarts"
// 引入主题（文件）
require('echarts/theme/macarons')
import resize from './mixins/resize' // ←左边这项表示“重置图表的大小，让图表自适应浏览器窗口的大小”
export default {
    mixins: [resize],
    props: {
        className: {
            type: String,
            default: "chart"
        },
        width: {
            type: String,
            default: "100%"
        },
        height: {
            type: String,
            default: "400px"
        },
        legendData: { // ←左边这项表示“在左侧的图例组件中被接收的数据”
            type: Array,
            // default:[] // ←注意：在此处不能直接写“default:[]”，而是要用下面的这种方法，写一个方法，在这个方法里返回一个数组，这样才行↓
            /* function(){
                        return []
                    } */
            default:
                // 把上面的这个方法↑改写成使用“箭头函数”的形式（因为在方法（函数）体中只有一行代码，并且这行代码是返回值，所以可以把方法（函数）体外面的大括号省略）↓
                // ()=>[]
                () => ["前端", "Java", "移动端", "大数据"]
        },
        seriesData: { // ←左边这项表示“在饼状图中被接收的数据”
            type: Array,
            default: () => [
                { value: 100, name: "前端" },
                { value: 200, name: "Java" },
                { value: 500, name: "移动端" },
                { value: 300, name: "大数据" }
            ]
        }
    },
    data() {
        return {
        chart: null // ←左边这个属性被用于接收echarts实例
        }
    },
    mounted() {
        // 当加载DOM（容器）后，会调用“this.initChart()”来进行初始化echarts实例
        this.$nextTick(() => {
        this.initChart()
        })
    },
    // 在组件被销毁之前会调用此钩子函数
    beforeDestroy() {
        if (!this.chart) {
        return
        }
        // 注销实例
        this.chart.dispose()
        this.chart = null
    },
    methods: {
        // 关于图表的初始化配置
        initChart() {
            // 初始化echarts实例
            // 第二个参数可以指定前面引入的主题（即被引用的主题）
            // var chart = echarts.init(this.$refs.main)
            this.chart = echarts.init(this.$refs.main,'macarons')
            // 图表的配置项
            this.chart.setOption({
                title: { // ←左边这项表示“图表展示时的标题”
                text: "各技术频道文章统计",
                // subtext: "纯属虚构", // ←左边这项表示“子标题”，可不设置
                left: "center" // ←左边这项表示“居中对齐”
                },
                tooltip: {
                    trigger: "item",
                    formatter:'{a}<br/>{b}:{c}({d}%)' // ←左边这项表示“鼠标放上去后显示的提示框的格式”
                },
                legend: { // ←左边这项是位于图标的左上角的“图例”组件，点击后会显示或隐藏图表的主体部分
                    orient: "vertical",
                    left: "left",
                    data:this.legendData
                },
                series: [{ // ←左边这项表示“序列”，它被用于配置核心数据（即“展示具体数据”）
                    name: "统计内容",
                    type: "pie", // ←左边这项表示“饼状图”
                    radius: "50%", // ←左边这项表示“圆的大小”
                    center:['50%','50%'], // ←左边这项表示“饼状图所在的位置”（格式：[左右,上下]）
                    data: this.seriesData,
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10, // ←左边这项表示“图形阴影的模糊大小”
                            shadowOffsetX: 0, // ←左边这项表示“水平方向偏移的距离”
                            shadowColor: "rgba(0, 0, 0, 0.5)" // ←左边这项表示“阴影的颜色”
                        }
                    }
                }]
            })
        }
    }
}
</script>